<template>
  <div class="note-editor">
    <div class="editor-container">
      <!-- 笔记标题 -->
      <div class="note-card">
        <label for="noteTitle" class="label">笔记标题</label>
        <input type="text" v-model="noteTitle" id="noteTitle" class="note-title-input" placeholder="请输入标题" />
      </div>

      <!-- 文本编辑器 -->
      <div class="note-card">
        <mavon-editor v-model="noteContent" :language="language" :font-size="fontSize" :scroll-style="scrollStyle"
          :box-shadow="boxShadow" :box-shadow-style="boxShadowStyle" :transition="transition"
          :toolbars-background="toolbarsBackground" :preview-background="previewBackground" :subfield="subfield"
          :default-open="defaultOpen" :placeholder="placeholder" :editable="editable" :code-style="codeStyle"
          :toolbars-flag="toolbarsFlag" :navigation="navigation" :short-cut="shortCut" :autofocus="autofocus"
          :ishljs="ishljs" :image-filter="imageFilter" :image-click="imageClick" :tab-size="tabSize" :html="html"
          :xss-options="xssOptions" :toolbars="toolbars" @change="handleChange" @imgAdd="handleImageAdd"
          @imgDel="handleImageDelete"></mavon-editor>
      </div>
      <!-- OCR 功能 -->
      <div class="note-card ocr">
        <p class="ocr-title">将图片中的文字提取为笔记</p>
        <input type="file" @change="handleFileUpload" class="ocr-input" />
        <div v-if="ocrResult" class="ocr-result">
          <p><strong>OCR 结果:</strong></p>
          <p>{{ ocrResult }}</p>
        </div>
        <div v-if="progress !== null" class="ocr-progress">
          <p>识别进度：{{ progress }}%</p>
        </div>
      </div>
      <!-- 标签选择 -->
      <div class="note-card">
        <div class="label">笔记标签</div>
        <div class="inputData">
          <el-select v-model="tags" multiple filterable allow-create default-first-option placeholder="请选择标签"
            style="width: 100%;" class="tags-select">
          </el-select>
        </div>
      </div>
      <el-radio-group v-model="importance">
        <el-radio :label="0">重要等级1</el-radio>
        <el-radio :label="1">重要等级2</el-radio>
        <el-radio :label="2">重要等级3</el-radio>
      </el-radio-group>
      <!-- 导出按钮 -->
      <div class="export-btn">
        <button @click="saveNote" class="btn-save">保存笔记</button>
        <button @click="exportPDF" class="btn-export">导出PDF</button>
        <button @click="deleteNote" class="btn-delete">删除笔记</button>
      </div>
    </div>
  </div>
</template>






<script>
import Vue from "vue";
import request from "@/utils/request";
import html2pdf from 'html2pdf.js';
import Tesseract from 'tesseract.js';
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
Vue.component("mavon-editor", mavonEditor);
import { baseURL, imageURL } from "@/utils/request";
import { jump } from "@/utils/commonFunction";
export default {
  name: 'NoteEditor',
  data() {
    return {
      id: null,
      noteContent: '', // 笔记内容
      noteTitle: '',
      importance: 0,
      newTag: '', // 新标签
      tags: [], // 标签列表
      ocrResult: '', // OCR 识别结果
      progress: null, // OCR 识别进度
      importance: 0,

      language: "zh-CN", //语言选择，暂支持 zh-CN: 简体中文, zh-TW: 正体中文 ， en: 英文 ， fr: 法语， pt-BR: 葡萄牙语， ru: 俄语， de: 德语， ja: 日语 |
      fontSize: "14px", //编辑区域文字大小
      scrollStyle: true, // 开启滚动条样式(暂时仅支持chrome)
      boxShadow: true, // 开启边框阴影
      boxShadowStyle: "0 2px 12px 0 rgba(0, 0, 0, 0.1)", // 边框阴影样式
      transition: true, // 是否开启过渡动画
      toolbarsBackground: "#ffffff", // 工具栏背景颜色
      previewBackground: "#fbfbfb", // 预览框背景颜色
      subfield: true, // true： 双栏(编辑预览同屏)， false： 单栏(编辑预览分屏)
      defaultOpen: "preview", // 在单栏（`subfield=false`）时默认展示区域. edit： 默认展示编辑区域， preview： 默认展示预览区域 其他 = edit
      placeholder: "开始编辑...", // 输入框为空时默认提示文本
      editable: true, // 是否允许编辑
      codeStyle: "code-github", // markdown样式： 默认github, [可选配色方案](/mavonEditor/src/lib/core/hljs/lang.hljs.css.js)
      toolbarsFlag: true, // 工具栏是否显示
      navigation: false, // 默认展示目录
      shortCut: true, // 是否启用快捷键
      autofocus: true, // 自动聚焦到文本框
      ishljs: true, // 代码高亮
      imageFilter: null, // 图片过滤函数，参数为一个`File Object`，要求返回一个`Boolean`, `true`表示文件合法，`false`表示文件不合法
      imageClick: null, // 图片点击事件，默认为预览，可覆盖
      tabSize: "\t", // tab转化为几个空格，默认为\t
      html: true, // 启用HTML标签，因为历史原因这个标记一直默认为true，但建议不使用HTML标签就关闭它，它能彻底杜绝安全问题。
      xssOptions: {}, // xss规则配置, 默认开启，设置false可以关闭，开启后会对HTML标签进行过滤，默认过滤所有HTML标签属性，建议按需配置白名单减少被攻击的可能。- 自定义规则参考: [https://jsxss.com/zh/options.html](https://jsxss.com/zh/options.html)- 参考DEMO: [dev-demo](/mavonEditor/src/dev/editor.vue)
      toolbars: {  // 工具栏显示那些工具
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
    };
  },
  created() {
    // 从 sessionStorage 中获取笔记数据
    const noteData = sessionStorage.getItem('note');
    console.log('笔记数据:', noteData);
    if (noteData) {
      const noteObj = JSON.parse(noteData);
      this.id = noteObj.id;
      this.noteContent = noteObj.noteContent;
      this.noteTitle = noteObj.noteTitle;
      this.tags = noteObj.tags;
      this.importance = noteObj.importance;
    }
    console.log('笔记数据:', noteData);
  },
  methods: {

    // 添加标签
    addTag() {
      if (this.newTag) {
        this.tags.push(this.newTag);
        this.newTag = '';
      }
    },
    // 导出 PDF
    exportPDF() {
      const element = document.getElementsByClassName('v-note-show')[0];
      html2pdf()
        .from(element)
        .save('笔记.pdf');
    },
    deleteNote() {
      request.delete(`/notes/${this.id}`).then(response => {
        if(response.code === 200){
          jump('/note/home');
        }
      })
        .catch(error => {
          this.$message({
            message: '删除失败',
            type: 'error'
          });
        })
    },
    saveNote() {
      if (this.noteTitle == null || this.tags == null || this.noteContent == null || this.importance == null) {
        this.$message({
          message: '请填写完整笔记信息',
          type: 'error'
        });
        return
      }
      // 占位
      const note = {
        id: this.id,
        userId: JSON.parse(localStorage.getItem('userInfo')).id,
        title: this.noteTitle,
        tags: this.tags.join(';'),
        content: this.noteContent,
        importance: this.importance,
      };
      request.post('/notes', note).then(res => {
        if (res.code === 200) {
          // window.close();
          jump('/note/home');
        } else {
          this.$message({
            message: '笔记保存失败',
            type: 'error'
          });
        }
      }).catch(err => {
        console.error('笔记保存失败', err);
        this.$message({
          message: '笔记保存失败',
          type: 'error'
        });
      });
    },
    // 处理文件上传（OCR）
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        this.readImage(file);
      }
    },
    // 使用 Tesseract.js 进行 OCR 识别
    readImage(file) {
      this.ocrResult = '';
      this.progress = null;

      Tesseract.recognize(
        file,
        'chi_sim', // 使用简体中文语言包
        {
          logger: (m) => {
            if (m.status === 'recognizing text') {
              this.progress = Math.round(m.progress * 100); // 获取进度并四舍五入
            }
          }
        }
      ).then(({ data: { text } }) => {
        this.ocrResult = text;
        this.progress = 100;
        this.insertOCRResult(text); // 将 OCR 结果插入到笔记内容中
      }).catch(err => {
        console.error('OCR Error: ', err);
        this.progress = null;
      });
    },
    // 将 OCR 结果插入到笔记内容中
    insertOCRResult(ocrText) {
      this.noteContent += `\n\nOCR 识别结果:\n${ocrText}`;
    },
    async handleImageAdd(pos, file) {
      console.log(pos);
      let entireUrl = null;
      try {
        // 创建FormData对象并添加文件
        let formData = new FormData();
        formData.append('image', file);

        // 发送图片到服务器
        axios.post(baseURL + 'upload/image', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(response => {
          entireUrl = imageURL + response.data;
          console.log("entireUrl:", entireUrl);
          this.$refs.myEditor.$img2Url(pos, entireUrl);
        }).catch(err => {
          console.error('上传失败:', err);
        });
      } catch (error) {
        console.error('图片上传失败', error);
      }
    },
    handleImageDelete(pos, imgFile) {
      console.log("删除图片，位置:", pos);
      console.log("图片文件:", imgFile);
      var url = pos[0]
      url = url.replace(imageURL, "")
      request.delete(`upload/image/${url}`).then(res => {
        console.log(res);
      })
    },
    handleChange(value, render) {
      // 定义正则表达式
      var regex = /!\[([^\[\]]+)\]\(([^)]+)\)/g;
      this.contentArray[this.index] = value.match(regex);
      var curImage = this.contentArray[this.index]
      var preImage = this.contentArray[(this.index + 1) % 2]
      this.index = (this.index + 1) % 2
      console.log(curImage);
      console.log(preImage);
      //新增的图片
      console.log(this.difference(curImage, preImage));
      //删除的图片
      console.log(this.difference(preImage, curImage));
    },
  },
};
</script>
<style scoped>
.note-editor {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  background-color: #f4f7fc;
}

.editor-container {
  width: 100%;
  max-width: 900px;
  background-color: #fff;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.note-card {
  margin-bottom: 20px;
}

.note-title-input,
.note-input,
.ocr-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 16px;
  outline: none;
  margin-top: 5px;
}

.note-title-input {
  height: 40px;
}

.note-input {
  height: 200px;
  resize: none;
}

.tags-select {
  border-radius: 8px;
}

.label {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 16px;
  color: #333;
}

.ocr {
  padding: 20px;
  border-radius: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
}

.ocr-title {
  font-size: 18px;
  margin-bottom: 15px;
}

.ocr-input {
  margin-bottom: 15px;
}

.ocr-result,
.ocr-progress {
  font-size: 14px;
  color: #555;
}

.export-btn {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 20px;
}

.btn-save,
.btn-export,
.btn-delete {
  padding: 12px 25px;
  font-size: 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.btn-save {
  background-color: #28a745;
  color: white;
}

.btn-save:hover {
  background-color: #218838;
}

.btn-export {
  background-color: #007bff;
  color: white;
}

.btn-export:hover {
  background-color: #0056b3;
}

.btn-delete {
  background-color: #F44336;
  color: white;
}
</style>